<template>
	<view>
		<!-- 自定义导航 -->
		<custom-navbar :title='title' bgColor='#0081ff' navbarStyle ='custom'></custom-navbar>
		<!-- 乘客信息 -->
		<view class="padding width">
			<view class="passengersMoudle" v-for="(item,index) in passengers" :key="index">
				<view class="passengersInfoMoudle">
					<view class="text-d text-bold" style="width: 160rpx;">姓名：</view>
					<view class="flex-sub" >{{item.personName}}</view>
				</view>
				<view class="passengersInfoMoudle">
					<view class="text-d text-bold" style="width: 160rpx;">电话号码：</view>
					<view class="flex-sub" >{{item.personPhone}}</view>
				</view>
				<view class="passengersInfoMoudle">
					<view class="text-d text-bold" style="width: 160rpx;">出发地址：</view>
					<view class="flex-sub" >{{item.setoutAddress}}</view>
				</view>
				<view class="passengersInfoMoudle">
					<view class="text-d text-bold" style="width: 160rpx;">目的地址：</view>
					<view class="flex-sub" >{{item.destinationAddress}}</view>
				</view>
				<view class="passengersInfoMoudle">
					<view class="text-d text-bold" style="width: 160rpx;">座位类型：</view>
					<view class="flex-sub" >{{item.seatType}}</view>
				</view>
				<view class="passengersInfoMoudle">
					<view class="text-d text-bold" style="width: 160rpx;">座位号码：</view>
					<view class="flex-sub" >{{item.seatNumber}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getTripPassengers } from '../../api/tripApi'
	export default {
		data() {
			return {
				title:'乘客详情',
				passengers:[]
			}
		},
		onLoad(option) {
			this.getPassengerDetail(option.tripId);
		},
		methods: {
			getPassengerDetail(param){
				let params = {
					tripId:param
				}
				getTripPassengers(params).then(res=>{
					if(res.data.code==200){
						this.passengers = res.data.data;
					}else{
						this.$modal.msg(res.data.msg)
					}
				})
			}
		}
	}
</script>

<style>
	.passengersMoudle{
		width: 100%;
		height: 600rpx;
		display: flex;
		flex-direction: column;
		padding: 10rpx 20rpx;
		margin-bottom: 20rpx;
		background-color: #fff;
		border-radius: 12rpx;
	}
	
	.passengersInfoMoudle{
		width: 100%;
		flex: 1;
		display: flex;
		align-items: center;
		border-bottom: 1rpx #333 solid;
	}
	

</style>
